<template>
    <div class="container">
        <div class="main">
            <div class="pay-title">
                支付总金额 <span class="pay-price">￥ {{payData.price}}</span>
            </div>
            <div class="pay-main">
                <h4>微信支付</h4>
                <el-row type="flex" 
                justify="space-between" 
                align="middle"
                class="pay-qrcode">
                    <div class="qrcode">
                        <!-- 二维码 -->
                        <canvas id="qrcode-stage"  ref="canvasCode"></canvas>
                        <p>请使用微信扫一扫</p>
                        <p>扫描二维码支付</p>
                    </div>
                    <div class="pay-example">
                        <img src="http://157.122.54.189:9093/images/wx-sweep2.jpg" alt="">
                    </div>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
// npm install --save qrcode
import QRCode from 'qrcode';
export default {
    data() {
        return {
            payData:'',
            payStateTimeout:null
        }
    },
    watch: {
          // 加入是刷新页面, 进来时没有 token  需要监听后发送请求
        // 但是我们现在并非监听 data 中的其中一个数据
        // 而是监听 vuex 里面的一个state 在 this.$store.state.user.userInfo.token
        // $store.state.user.userInfo 是没有办法变成函数名的
        // $store.state.user.userInfo() {
               // 应该恢复 key: value 形式赖生明函数
        "$store.state.user":function(){
            console.log('监听$store.state.user');
            
            this.get_airorders()
        }
    },
    methods: {
        // 获取支付页面数据
        get_airorders() {
            this.$axios({
                method:"get",
                url:"/airorders/"+ this.$route.query.id,
                headers: {
                   Authorization :'Bearer ' + this.$store.state.user.userInfo.token
                }
            }).then(res=>{
                // console.log(res);
                this.payData = res.data;
                // console.log('this.payInfo: ', this.payInfo);
                // 获取完机票数据后开始生成二维码
                this.initCanvas()
                
            })
        },
        // 二维码
        initCanvas() {
            // toCanvas(canvasElement, text, [options], [cb(error)])
            // 第一个参数 canvasElement 是用来获取 Canvas 画布标签 的 DOM元素
            const canvasElement = this.$refs.canvasCode;
            // 第二个参数 是用来生成二维码的字符串;
            const text = this.payData.payInfo.code_url; // log →  "weixin://wxpay/bizpayurl?pr=HH5aGq3"
            // 第三个参数 是用来配置样式的
            const options = {  width:200  }  // 参考 https://www.npmjs.com/package/qrcode#qr-code-options
            // 第四个参数 是报错处理
            // QRCode.toCanvas(canvasElement, text, [options])
            QRCode.toCanvas(canvasElement, text, options);
            // 二维码生成完毕便可以开始查询支付状态
            this.queryPay()
        },
        // 查询支付状态
        queryPay() {
            // 订单id
            const id = this.$route.query.id;
            // 金额
            const nonce_str = this.payData.price;
            // 订单编号
            const out_trade_no = this.payData.orderNo;
            this.$axios({
                method:'post',
                url:'/airorders/checkpay',
                headers: {
                    Authorization : 'Bearer ' + this.$store.state.user.userInfo.token
                },
                data: {
                 id,nonce_str,out_trade_no
                }
            }).then(res=>{
                // console.log(res.data.statusTxt);
                // console.log('res: ', res);
                const trade_state = res.data.trade_state;
                // 订单未支付状态
                if (trade_state == "NOTPAY") {
                    // 定时器 轮询写法 
          this.payStateTimeout = setTimeout(() => {
              //   调用自己
                      this.queryPay()
                       console.log('未支付');
               }, 3500);
               }else {
            
                   //  if写法
                    // if(trade_state == "SUCCESS") {
                    //     console.log('支付成功');
                    // }

                    // if(trade_state == "REFUND") {
                    //     console.log('转入退款');
                    // }

                    // if(trade_state == "NOTPAY") {
                    //     console.log('未支付');
                    // }

                    // if(trade_state == "CLOSED") {
                    //     console.log('已关闭');
                    // }

                    // if(trade_state == "REVOKED") {
                    //     console.log('已撤销（付款码支付）');
                    // }

                    // if(trade_state == "USERPAYING") {
                    //     console.log('用户支付中（付款码支付）');
                    // }

                    // if(trade_state == "PAYERROR") {
                    //     console.log('支付失败(其他原因，如银行返回失败)');
                    // }

                    // 支付状态判断 switch写法
                //   this.switchPayState(trade_state)

               }
                
            })
        },
        // 支付状态判断 switch写法
        switchPayState(result) {
              switch (result) {
                case 'SUCCESS':
                    console.log("支付成功");
                    break;

                case 'REFUND':
                    console.log("转入退款");
                    break;

                case 'NOTPAY':
                    console.log("未支付");
                    break;

                case 'CLOSED':
                    console.log("已关闭");
                    break;

                case 'REVOKED':
                    console.log("已撤销（付款码支付）");
                    break;

                case 'USERPAYING':
                    console.log("用户支付中（付款码支付）");
                    break;

                case 'PAYERROR':
                    console.log("支付失败");
                    break;
                default:
                    break;
            }
        }
    },
    mounted() {
        if (this.$store.state.user.userInfo.token) {
            this.get_airorders()
        }
    },
    // 生命函数 销毁
    destroyed() {
    console.log('生命函数 销毁: ', '生命函数 销毁');
        clearTimeout(this.payStateTimeout)
    },
}
</script>

<style scoped lang="less">
.container{
    background:#f5f5f5;
    padding: 30px 0;

    .main{
        width:1000px;
        margin:0 auto;

        .pay-title{
            text-align: right;
            span{
                font-size:28px;
                color:orangered;
            }
        }

        .pay-main{
            background:#fff;
            margin-top:10px;
            border-top: 5px orange solid;
            padding:30px;

            h4{
                font-size: 28px;
                font-weight: normal;
                margin-bottom: 10px;
            }

            .pay-qrcode{
                padding:0 80px;
            }

            .qrcode{
                border:1px #ddd solid;
                padding:15px;
                height: fit-content;

                #qrcode-stage{
                    width:200px;
                    height:200px;
                    margin-bottom: 10px;
                }

                p{
                    line-height: 2;
                    text-align: center;
                }
            }
        }
    }
}
</style>